<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { message } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';

import { useFormSchema } from '../data';

const emit = defineEmits(['success']);
const formData = ref<any>();

const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
    formItemClass: 'col-span-1',
    labelWidth: 80,
  },
  layout: 'horizontal',
  schema: useFormSchema(),
  showDefaultActions: false,
});

const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    const { valid } = await formApi.validate();
    if (!valid) {
      return;
    }
    modalApi.lock();
    // 提交表单
    const data = await formApi.getValues();
    // 关闭并提示
    await modalApi.close();
    message.success('下载安装中...');
    emit('success', data);
    modalApi.unlock();
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      formData.value = undefined;
    }
  },
});
</script>

<template>
  <Modal class="w-2/5" title="安装模型">
    <a-alert
      message="模型名称可以到ollama官网中查看，模型名称格式为：模型名称:版本号，比如qwen2:7b"
      type="warning"
      style="margin-bottom: 16px"
    />
    <Form class="mx-4" />
  </Modal>
</template>
